<!-- 国标编码规则 -->
<template lang="html">
  <div class="code-rule" :val="value_">
    <Form ref="formCodeRule" :model="codeRule" label-position="right" :label-width="140" >
      <FormItem :label="$t('city')">
        <Row :gutter="4">
          <Col span="14">
            <Treeselect :options="cityCodes"
                        :multiple="false"
                        v-model="codeRule.cityId"
                        noChildrenText="to end!"
                        :placeholder="$t('city')"
                        :disabled="true"
                        @select="onSelect"
                        @deselect="onDeselect"></Treeselect>
          </Col>
          <Col span="10"><Input class="select-code" v-model="codeRule.cityId" :placeholder="$t('division_code')" :disabled="true"></Input></Col>
        </Row>
      </FormItem>
      <FormItem :label="$t('industry_code')">
        <Row :gutter="4">
          <Col span="14">
            <Select class="select-input" filterable :loading="loading1" v-model="codeRule.businessId" @on-change="onBusChange()" :disabled="true">
              <Option v-for="(item, id) in businessCodes" :value="item.id" :key="id">{{item.busName}}</Option>
            </Select>
          </Col>
          <Col span="10">
            <Input class="select-code" v-model="codeRule.businessId" :placeholder="$t('industry_code')" :disabled="true"></Input>
          </Col>
        </Row>
      </FormItem>

      <FormItem :label="$t('server_type_code')">
        <Row :gutter="4">
          <Col span="14">
            <Select class="select-input" filterable :loading="loading2" v-model="codeRule.centerTypeId" :disabled="true">
              <Option v-for="(item, id) in centerCodeType" :value="item.id" :key="id">{{item.codeTypeName}}</Option>
            </Select>
          </Col>
          <Col span="10"><Input class="select-code" v-model="codeRule.centerTypeId" :placeholder="$t('server_type_code')" :disabled="true"></Input></Col>
        </Row>
<!--        <Select class="select-input" filterable :loading="loading2" v-model="codeRule.centerTypeId" :disabled="true">
          <Option v-for="(item, id) in centerCodeType" :value="item.id" :key="id">{{item.codeTypeName}}</Option>
        </Select>
        <Input class="select-code" v-model="codeRule.centerTypeId" placeholder="服务器类型编码" :disabled="true"></Input>-->
      </FormItem>
      <FormItem :label="$t('devcie_type_code')">
        <Row :gutter="4">
          <Col span="14">
            <Select :disabled="!isZhCn" class="select-input" filterable :loading="loading2" v-model="codeRule.deviceTypeId">
              <Option v-for="(item, id) in deviceCodeType" :value="item.id" :key="id">{{item.codeTypeName}}</Option>
            </Select>
          </Col>
          <Col span="10">
            <Input class="select-code" maxlength=3 minlength=3 v-model="codeRule.deviceTypeId" :placeholder="$t('devcie_type_code')" ></Input>
          </Col>
        </Row>


      </FormItem>
      <FormItem :label="$t('network_identity')">
        <Row :gutter="4">
          <Col span="14">
            <Select :disabled="!isZhCn" class="select-input" filterable :loading="loading2" v-model="codeRule.netIdentityId">
              <Option v-for="(item, id) in codeNetIdentity" :value="item.id" :key="id">{{item.netIdentityName}}</Option>
            </Select>
          </Col>
          <Col span="10">
            <Input class="select-code" maxlength=1 minlength=1 v-model="codeRule.netIdentityId" :placeholder="$t('network_identity')" ></Input>
          </Col>

        </Row>
      </FormItem>

    </Form>
  </div>
</template>
<script>
import CodeRule from '@/api/CodeRule';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import {apiResult} from "@/libs/util";
export default {
  components: {Treeselect},
  props: {
    value: {
      type: Object,
      default:{
        cityId: null,
        businessId: null,
        centerTypeId: null,
        deviceTypeId: '113',
        netIdentityId: '7',
      }
    }
  },
  watch: {
    //传进来时
    'value' (newValue, oldValue) {
      //console.log("GBCodeRule.watch.value: n=%o;o=%o",newValue,oldValue );
      this.codeRule = this.value;
    },
    selectCityCodes(newValue,oldValue){
      if (!!this.selectCityCodes){
        this.codeRule.cityId = this.selectCityCodes[this.selectCityCodes.length-1];
      }else{
        this.codeRule.cityId = null;
      }
    },
  },
  computed: {
    //取得结果时
    value_() {
      this.$emit('input', this.codeRule);
      return this.codeRule;
    }
  },

  data(){
    return{
      placeholder:"",//请选择行政区划
      selectCityCodes: [], //数组，显示上级下级的id一起
      loading1:false,
      loading2:false,
      api: new CodeRule(),
      isZhCn:false, //是否中文版本
      /*options1: ["California"],*/
      codeRule:{
        cityId: null,
        businessId: null,
        centerTypeId: null,
        deviceTypeId: '113',
        netIdentityId: '7',
      },
      cityCodes:[],
      /*list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],*/
      businessCodes:[],
      centerCodeType:[],
      deviceCodeType:[],
      codeNetIdentity:[]
    }
  },
  methods:{
    /** 选择 */
    onSelect(node, instanceId){console.log("on_deselect: o%，o%",node,instanceId); },
    /** 取消选择*/
    onDeselect(node, instanceId){
      console.log("on_deselect: %o",this.orgValue);
    },

    onBusChange(){
      ;
    },
    codeCityOnChange(value, selectedData){
    },

    genChildren(parent,data){
      let item = {
        label: data.label,
        id: data.value,
        children: []
      };

      parent.children.push(item);
      if (!!data.children){
        for(let i in data.children){
          this.genChildren(item,data.children[i])
        }
      }
    }
  },

  mounted() {
    this.api.findCodeCity().then(res=>{
      this.testCity=[];
      apiResult(res.data,false,result=>{
        for(let i in result.data){
          const parent ={
            label:result.data[i].label,
            id:result.data[i].value,
            children:[]
          }
          this.testCity.push(parent);
          if (!! result.data[i].children){
            for(let j in result.data[i].children){
              this.api.genChildren(parent,result.data[i].children[j])
            }
          }
        }
        this.cityCodes=this.testCity;//res.data.data;
      })
    })

    this.api.findCodeBusiness().then(res=>{
      this.businessCodes=[];
      apiResult(res.data,false,result=>{
        this.businessCodes=result.data;
      })
    })
    this.api.findCodeType().then(res=>{
      this.centerCodeType=[];
      this.deviceCodeType=[];
      apiResult(res.data,false,result=>{
        this.centerCodeType=result.data;
        this.deviceCodeType=this.centerCodeType;
      })
    })

    this.api.findCodeNetIdentity().then(res=>{
      this.codeNetIdentity=[];
      apiResult(res.data,false,result=>{
        this.codeNetIdentity=result.data;
      })
    })

    //是不中文版
    this.isZhCn = (this.$store.state.app.local === 'zh-CN' || this.$store.state.app.local === 'zh-TW');
  }
}

</script>
<style lang="less">
   //@import "../../my-theme/template";
   .code-rule {
     text-align: left;
     padding: 10px;
     //background: #fff;
     border: 1px solid #dcdfe6;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
   }

   .select-input{
     width: 200px;
     float: left;
   }
   .select-code{
     width: 150px;
     float: left;
   }

</style>
